<template>
    <div style="width: 100%; height: 100%">
        <div
            v-show="obj.videoList[obj.videoSelected]"
            style="width: 100%; height: 100%"
        >
            <video
                id="video"
                ref="videoDom"
                crossOrigin="anonymous"
                :src="obj.videoList[obj.videoSelected]?.videoUrl"
                style="padding: 3px; width: 100%; height: 100%"
            ></video>
            <CropTools
                :duration="duration"
                :playing="playing"
                :currentPlayingTime="currentTime"
                @play="playVideo"
                @pause="pauseVideo"
                @stop="stopVideo"
                @getTimeMethod="getTimeMethod"
            />
        </div>
        <div
            v-show="!obj.videoList[obj.videoSelected]"
            style="
                position: absolute;
                right: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            "
        >
            视频显示区, 待上传视频
        </div>
    </div>
</template>
<script>
// import { mapState } from "vuex";
import pubsub from "pubsub-js";
import CropTools from "./CropTools.vue";
export default {
    components: {
        CropTools,
    },
    data() {
        return {
            playing: false,
            currentTime: 0,
            duration: 0,
            startEndTime: [],
        };
    },
    watch: {
        "obj.videoList.length"(newV) {
            this.obj.videoSelected = newV - 1;
        },
        playStatus(newV) {
            if (newV) {
                this.$refs.videoDom.play();
            } else {
                this.$refs.videoDom.pause();
            }
        },
    },
    props: ["obj"],
    computed: {
        // ...mapState({
        //     videoList: (state) => state.app.videoList,
        //     videoSelected: (state) => state.app.videoSelected,
        // }),
        playStatus() {
            return this.obj.videoList[this.obj.videoSelected]?.playStatus;
        },
    },
    mounted() {
        let videoDom = this.$refs.videoDom;
        videoDom.addEventListener("loadeddata", () => {
            this.$set(
                this.obj.videoList[this.obj.videoSelected],
                "duration",
                videoDom.duration
            );
        });
        videoDom.addEventListener("pause", () => {
            this.$set(
                this.obj.videoList[this.obj.videoSelected],
                "playStatus",
                false
            );
        });
        videoDom.ondurationchange = () => {
            this.duration = videoDom.duration;
        };
        videoDom.onplaying = () => {
            this.playing = true;
        };
        videoDom.onpause = () => {
            this.playing = false;
        };
        videoDom.ontimeupdate = () => {
            this.currentTime = videoDom.currentTime;
        };
    },
    methods: {
        seekVideo(seekTime) {
            this.$refs.videoDom.currentTime = seekTime;
        },
        playVideo(time) {
            this.seekVideo(time);
            this.$refs.videoDom.play();
        },
        pauseVideo() {
            this.$refs.videoDom.pause();
        },
        stopVideo() {
            this.$refs.videoDom.pause();
            this.$refs.videoDom.currentTime = 0;
        },
        getTimeMethod(value) {
            console.log("fa", value);
            this.startEndTime = value;
            pubsub.publish("time", this.startEndTime);
        },
    },
};
</script>
